@import "./../../base/style.scss";
@import "./../../base/shadow.scss";

.src-result {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: default;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    z-index: 99999;
    .mask {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0);
        transition: all ease-out 0.3s;
        &.in {
            background: rgba(0, 0, 0, 0.1);
        }
    }
    .box {
        border-radius: 3px;
        @include boxShadow(9);
        transition: all ease-out 0.3s;
        opacity: 0;
        transform: translate3d(0, 50px, 0);
        background: $f9;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .top {
            padding: 60px 0 30px 0;
            text-align: center;
            background-image: url(./../../base/images/flower.svg);
            background-repeat: no-repeat;
            background-size: 150px;
            background-position: top right;
            .middle {
                font-size: 50px;
                text-align: center;
                display: inline-block;
            }
        }
        .sta {
            text-align: center;
            line-height: 25px;
            .label {
                padding: 0 10px 0 0;
                display: inline-block;
                vertical-align: top;
            }
        }
        .list {
            border: 1px solid $f5;
            margin: 10px 15px 10px 15px;
            border-radius: 3px;
            overflow: auto;
            .item {
                line-height: 35px;
                display: flex;
                border-bottom: 1px solid $f5;
                .aa {
                    flex-grow: 1;
                    padding: 0 10px 0 10px;
                }
                .dd {
                    width: 40px;
                    text-align: center;
                    &.correct {
                        color: $a2;
                    }
                    &.wrong {
                        color: $a3;
                    }
                }
                &:nth-child(even) {
                    background-color: $f8;
                }
                &:last-child {
                    border-bottom: 0;
                }
                &.rr {
                    background: rgba(255, 77, 79, 0.1);
                }
            }
        }
        .bottom {
            text-align: center;
            .btn {
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                cursor: pointer;
                display: inline-block;
                padding: 0 10px 0 10px;
                &.aa {
                    color: $a4;
                }
                &.bb {
                    color: $f3;
                    font-size: 13px;
                }
            }
        }
        &.in {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}
